.lexmis-Modal{
	$head-height:50px;
	$foot-height:50px;
	background:rgba(55,55,55,.6);
	width:100vw;
	height:100vh;
	position:fixed;
	left:0;
	top:0;
	>.lexmis_dialog{
		background:#fff;
		position:absolute;
		border-radius:4px;
		overflow:hidden;
		box-shadow:0 4px 12px rgba(0,0,0,0.15);
		display:flex;
		flex-direction:column;
		>.lexmis_head{
			flex-shrink:0;
			display:flex;
			height:$head-height;
			background:#F6F6F6;
			>.lexmis_title{
				width:100%;
				height:100%;
				line-height:$head-height;
				padding-left:16px;
				font-size:14px;
				color:#333;
				user-select:none;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			>.lexmis_close{
				flex-shrink:0;
				width:$head-height;
				height:100%;
				display:flex;
				justify-content:center;
				align-items:center;
				>.lexmis-Icon{
					color:#333;
					font-size:20px;
					cursor:pointer;
					&:hover{
						color:#000;
					}
				}
			}
		}
		>.lexmis_body{
			position:relative;
			flex-grow:1;
			flex-basis:0;
			overflow:hidden;
			>.lexmis-BothScrollArea{
				height:100%;
			}
			.lexmis_loading{
				z-index:99;
			}
		}
		>.lexmis_foot{
			flex-shrink:0;
			padding:0 10px;
			display:flex;
			justify-content:flex-end;
			align-items:center;
			height:$foot-height;
			background:#4d4d4d;
			>.lexmis-Button{
				margin:0 10px;
			}
		}
	}
	&.v-enter-active{
		animation:backgroundColor forwards .3s linear;
		>div{
			animation:zoom forwards .3s linear;
		}
	}
	&.v-leave-active{
		animation:backgroundColor forwards .3s linear reverse;
		>div{
			animation:zoom forwards .3s linear reverse;
		}
	}
	@keyframes backgroundColor{
		0%{background:rgba(55,55,55,0);}
		100%{background:rgba(55,55,55,.6);}
	}
	@keyframes zoom{
		0%{opacity:0;transform:scale(0.8);}
		100%{opacity:1;transform:scale(1);}
	}
}
